Vitepress Theme Teek

主题

Teeker2025-04-13
484
1.8m

Components 组件 ​

Teek 有两大组件类型：

  • 公共组件
  • 主题组件

公共组件 ​

公共组件是一些基础的组件，能够独立使用，在公共组件专题会提供 Demo 使用实例。

主题组件 ​

主题组件是基于 VitePress 主题开发的组件，需要配合 VitePress 使用，因此主题组件专题 仅介绍如何在 VitePress 中引入并使用，当您想在其他 VitePress 主题或 VitePress 默认主题下单独引入 Teek 的部分组件时可以参考。

警告

如果您在 .vitepress/theme/index.ts 已经引入 Teek，则无需单独引入主题组件。

在按需引入主题组件前，您必须先在 .vitepress/config.mts 中引入 Teek 的配置加载器。

ts
// .vitepress/config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({});

export default defineConfig({
  extends: teekConfig,
});

Teek 的大部分组件并不是像中后台系统组件一样采用 props 来传入配置项，而是通过如下两种方式：

  1. 在 config.mts 文件通过 defineTeekConfig({}) 添加组件的配置项
  2. 在入口组件通过 provide(teekConfigContext, {}) 添加组件的配置项，provide 方式在主题组件的文章里会进行说明

provide 方式优先级大于 defineTeekConfig 方式。

defineTeekConfig 函数内部会进行一些 Vite 插件的初始化，有关 Vite 插件的介绍和如何禁用请看 Vite 插件。

除此之外，defineTeekConfig 函数会注册 Teek 内置的 Markdown 拓展，有关 Markdown 拓展的介绍请看 Markdown 拓展。

提示

本专题仅介绍如何引入 Teek 的主题组件，每个组件所需要的配置项请看导航栏 配置 的 主题配置。

在按需注册主题组件的时候，如果您认为主题组件插入插槽的位置不符合期望，可以阅读 插槽布局，选择一个合适的插槽位置。

最近更新